<script lang="ts" setup>
import { ElMessage, ElMessageBox, ElTable } from 'element-plus'
import { reactive, ref } from 'vue'
import { toNumber } from 'lodash-es'
import { GetData, PatchListSort } from '@/api/modules/shareCardConfiguration.ts'

const router = useRouter()
// const imgDomain = 'https://img1.eprhan.cc'

// function handleSelect(key: string) {
//   // eslint-disable-next-line no-console
//   console.log(key)
// }

// 查询表单
const findFrom = reactive({
  Title: '',
})

// 加载
const loading = ref(false)
const total = ref(0) // 总数据数
let PageSize = 10
let PageNum = toNumber(localStorage.getItem('currentPage')) || 1

// 数据列表
const dataList = reactive({
  list: [],
})

interface showFrom {
  id: number
  title: string
  pagepath: string
  desp: string
  weappIconUrl: string
  cardPicUrl: string
  username: string
  appid: string
  cdnkey: string
  cdnMd5: string
  aeskey: string
  fileSize: string
  recState: number
  addTime: string
}
// 查看详情的表单
const showFromData = ref<showFrom>({
  id: 0,
  title: '',
  pagepath: '',
  desp: '',
  weappIconUrl: '',
  cardPicUrl: '',
  username: '',
  appid: '',
  cdnkey: '',
  cdnMd5: '',
  aeskey: '',
  fileSize: '',
  recState: 1,
  addTime: '',
})

// 获取小程序卡片数据
function GetDataList(PageIndex: number = 1, PageSize: number = 10) {
  loading.value = true
  const params = {
    PageIndex,
    PageSize,
    ...(findFrom.Title && { Title: findFrom.Title }),
  }
  GetData({ params }).then((res) => {
    // console.log(res.data.items)
    total.value = res.data.total
    dataList.list = res.data.items
    loading.value = false
  }).catch(() => {
    ElMessage.error('获取数据失败。')
    loading.value = false
  })
}
// 添加
function gohome() {
  router.push({
    name: 'shareCardConfigurationDetail',
  })
}
// 查询
function Inquire() {
  GetDataList(1, PageSize)
}
// 编辑
function Redact(id: number) {
  localStorage.setItem('currentPage', `${PageNum}`)
  router.push({
    name: 'shareCardConfigurationDetail',
    query: {
      id,
    },
  })
}
// 详情
const dialogVisible = ref(false)
function Detail(row: any) {
  // console.log(row)
  showFromData.value = row
  dialogVisible.value = true
}
// 删除
function Delete(row: any) {
  const params = {
    id: row.id,
    recState: 2,
  }
  ElMessageBox.confirm(
    '你确定要删除该卡片吗？',
    '删除',
    {
      confirmButtonText: '删除',
      cancelButtonText: '取消',
      type: 'error',
    },
  )
    .then(async () => {
      await PatchListSort(params).then((res: any) => {
        if (res.succeeded) {
          ElMessage.success('删除成功。')
          GetDataList(PageNum, PageSize)
        }
        else {
          ElMessage.error('删除失败', res.errors)
          GetDataList(PageNum, PageSize)
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}

// 页码
function handleSizeChange(val: number) {
  GetDataList(1, val)
  PageSize = val
}
function handleCurrentChange(val: number) {
  GetDataList(val, PageSize)
  PageNum = val
}

const nowPageNum = computed(() => {
  return toNumber(localStorage.getItem('currentPage')) || 1
})

onMounted(() => {
  if (localStorage.getItem('currentPage') !== null) {
    GetDataList(toNumber(localStorage.getItem('currentPage')), 20)
    localStorage.removeItem('currentPage')
  }
  else {
    GetDataList()
  }
})
</script>

<template>
  <PageMain>
    <!-- <el-tabs type="card">
      <el-tab-pane label="发送消息"> -->

    <!-- <el-menu
      default-active="1"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item index="1">
        发送消息
      </el-menu-item>
      <el-menu-item index="2">
        加企微好友欢迎语
      </el-menu-item>
    </el-menu> -->
    <SearchBar :show-toggle="false">
      <div class="header">
        <el-form label-positio="right" label-width="auto">
          <div class="from">
            <el-form-item label="标题">
              <el-input v-model="findFrom.Title" placeholder="请输入标题" clearable @keyup.enter="Inquire" />
            </el-form-item>
          </div>
        </el-form>
        <div class="text-right">
          <el-button @click="Inquire">
            查询
          </el-button>
        </div>
      </div>
    </SearchBar>
    <ElDivider border-style="dashed" />
    <div class="mb-5 text-right">
      <el-button type="success" @click="gohome">
        添加
      </el-button>
    </div>
    <ElTable v-loading="loading" :data="dataList.list" stripe style="width: 100%;" border>
      <el-table-column align="center" prop="id" label="ID" width="120" />
      <el-table-column header-align="center" prop="title" label="标题" width="200" />
      <el-table-column align="center" prop="msgtype" label="类型" width="120">
        <template #default="scope">
          <el-tag>
            {{ scope.row.msgtype === 2 ? '文本'
              : scope.row.msgtype === 13 ? '链接'
                : scope.row.msgtype === 78 ? '小程序'
                  : scope.row.msgtype === 101 ? '外部联系人图片'
                    : scope.row.msgtype === 104 ? 'gif表情'
                      : scope.row.msgtype === 141 ? '视频号' : ''
            }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column header-align="center" prop="desp" label="描述" width="600" />
      <el-table-column align="center" prop="productName" label="小图标" width="100">
        <template #default="scope">
          <el-avatar shape="square" :size="60" :src="scope.row.weappIconUrl" />
        </template>
      </el-table-column>
      <el-table-column align="center" prop="salePrice" label="卡片的图片" width="200">
        <template #default="scope">
          <el-avatar shape="square" :size="100" :src="scope.row.cardPicUrl" />
        </template>
      </el-table-column>
      <el-table-column header-align="center" prop="pagepath" label="小程序页面地址" width="350" />
      <el-table-column align="center" prop="addTime" label="添加时间" width="200" />
      <el-table-column align="center" label="操作" fixed="right" width="260">
        <template #default="scope">
          <div class="table-button">
            <el-button type="primary" @click="Redact(scope.row.id)">
              编辑
            </el-button>
            <el-button type="info" @click="Detail(scope.row)">
              详情
            </el-button>
            <el-button type="danger" @click="Delete(scope.row)">
              删除
            </el-button>
          </div>
        </template>
      </el-table-column>
    </ElTable>
    <div style="height: 10px;" />
    <el-pagination
      :page-sizes="[5, 10, 20, 50, 100]"
      layout="total, sizes, ->, prev, pager, next, jumper"
      :total="total"
      :default-current-page="nowPageNum"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <el-dialog v-model="dialogVisible" width="1400">
      <el-descriptions title="详情" :column="2" border>
        <el-descriptions-item v-if="showFromData.title" label="标题" min-width="160">
          {{ showFromData.title }}
        </el-descriptions-item>
        <el-descriptions-item v-if="showFromData.desp" label="描述">
          {{ showFromData.desp }}
        </el-descriptions-item>
        <el-descriptions-item v-if="showFromData.weappIconUrl" label="小图标">
          <el-image :size="20" :src="showFromData.weappIconUrl" fit="fill" />
        </el-descriptions-item>
        <el-descriptions-item v-if="showFromData.cardPicUrl" label="卡片">
          <el-image :size="20" :src="showFromData.cardPicUrl" fit="fill" />
        </el-descriptions-item>
        <el-descriptions-item v-if="showFromData.pagepath" label="小程序跳转地址">
          {{ showFromData.pagepath }}
        </el-descriptions-item>
        <el-descriptions-item v-if="showFromData.username" label="原始id">
          {{ showFromData.username }}
        </el-descriptions-item>
        <el-descriptions-item v-if="showFromData.appid" label="小程序appid">
          {{ showFromData.appid }}
        </el-descriptions-item>
        <el-descriptions-item v-if="showFromData.recState" label="状态">
          {{ showFromData.recState === 1 ? '正常' : '已删除' }}
        </el-descriptions-item>
        <el-descriptions-item v-if="showFromData.addTime" label="添加时间">
          {{ showFromData.addTime }}
        </el-descriptions-item>
        <el-descriptions-item v-if="showFromData.cdnMd5" label="CDNMD5">
          {{ showFromData.cdnMd5 }}
        </el-descriptions-item>
        <el-descriptions-item v-if="showFromData.aeskey" label="AESKEY">
          {{ showFromData.aeskey }}
        </el-descriptions-item>
        <el-descriptions-item v-if="showFromData.fileSize" label="FILESIZE">
          {{ showFromData.fileSize }}
        </el-descriptions-item>
        <el-descriptions-item v-if="showFromData.cdnkey" label="CDNKEY">
          <div style="width: 60vw;overflow: hidden;">
            {{ showFromData.cdnkey }}
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
    <!-- </el-tab-pane>
      <el-tab-pane label="加企微好友欢迎语">
      </el-tab-pane>
    </el-tabs> -->
  </PageMain>
</template>

<style scoped>
.header {
  display: grid;
  grid-template-columns: 6fr 1fr;

  .from {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 20px;

    .el-form-item {
      margin-bottom: 0;
    }
  }
}
</style>
